var app = new Vue({
    el: "#app",
    data: {
        wxconfig: {
            appid: '',
            timestamp: '',
            nonceStr: '',
            signature: '',
            jsApiList: []
        },
        faces: [],
        images: {
            localIds: [],
            serverIds: []
        },
        userInfo: {},
        showModal: false,
        deleting: false,
        confirm: false,
        deleteIndex: -1,
        alertMsg: null,
        showAlert: false,
        uploading: false
    },
    created: function () {
        this.getWechatConfig();
        this.getImages();
        localStorage.clear();
    },
    methods: {
        preview: function (e) {
            window.location.href = e.target.src.replace(/\/thumbnail/, '')
        },
        getFace: function (face) {
            var url = '/user/face/image/' + this.userInfo.deviceId + "/user_" + this.userInfo.deviceUserId + "/" + face
            return url;
        },
        getWechatConfig: function () {
            var vm = this
            request.get("/wechat/jssdk", {
                params: {
                    url: encodeURI(window.location.href)
                }
            }).then(body => {
                if (body.code === 200) {
                    vm.wxConfig(body.data)
                }

            })
        },
        wxConfig: function (data) {
            // console.log(data);
            wx.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: ['chooseImage', 'uploadImage']
            }, function (res) {

            })
        },
        choseImage: function () {
            var vm = this
            if (vm.faces.length == 16) {
                vm.alertMsg = '最大上传人脸图片不超过16张,请删除后上传！'
                vm.showAlert = true
                return;
            }
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    vm.localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    for (var i = 0; i < res.localIds.length; i++) {
                        wx.uploadImage({
                            localId: res.localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                vm.uploadImage(res.serverId)
                            }
                        });
                    }
                }
            });
        },
        getImages: function () {
            var vm = this
            request.get('/user/info').then(body => {
                vm.userInfo = body.data
                vm.faces = body.data.faces;
            })
        },
        uploadImage: function (serverId) {
            var vm = this
            this.uploading = true
            request.get("/user/face", {
                params: {
                    wechatImageServerId: encodeURI(serverId)
                }
            }).then(body => {
                vm.uploading = false
                if (body.code === 200) {
                    vm.faces.push(body.data)
                } else {
                    vm.alertMsg = body.msg
                    vm.showAlert = true
                }
            })
        },
        showConfirm(index){
            this.deleteIndex = index;
            this.confirm = true
        },
        deleteImage: function () {
            this.confirm = false
            this.deleting = true
            let vm = this
            var face = this.faces[this.deleteIndex]
            request.get("/user/face/" + face.id + "/delete").then(function (body) {
                vm.deleting = false
                if (body.code === 204) {
                    vm.faces.splice(vm.deleteIndex, 1);
                    vm.faces = vm.faces
                } else {
                    vm.alertMsg = body.msg
                    vm.showAlert = true
                }
            })
        },
        closemodal: function () {
            this.showModal = false
        },
        modal: function (value) {
            this.showModal = true
        },
        wxready: function () {
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: ['chooseImage', 'uploadImage'],
                    success: function (res) {
                    }
                })
            });
        }
    },

});
